@import "tailwindcss";
@import "vis-network/styles/vis-network.css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: Inter, var(--font-geist-sans);
  --font-mono: "JetBrains Mono", var(--font-geist-mono);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  
  /* Premium glassmorphism and blur effects */
  --blur-sm: 4px;
  --blur-md: 8px;
  --blur-lg: 16px;
  --blur-xl: 24px;
  
  /* Enhanced shadows for depth */
  --shadow-soft: 0 2px 8px -1px rgb(0 0 0 / 0.05), 0 1px 3px -1px rgb(0 0 0 / 0.1);
  --shadow-medium: 0 4px 16px -2px rgb(0 0 0 / 0.08), 0 2px 6px -1px rgb(0 0 0 / 0.12);
  --shadow-strong: 0 8px 32px -4px rgb(0 0 0 / 0.12), 0 4px 12px -2px rgb(0 0 0 / 0.16);
  --shadow-premium: 0 16px 64px -8px rgb(0 0 0 / 0.16), 0 8px 24px -4px rgb(0 0 0 / 0.2);
}

:root {
  --radius: 0.625rem;
  
  /* Light Theme - Deep Ocean Tech Colors with improved contrast */
  --background: hsl(0, 0%, 100%);
  --foreground: hsl(215, 30%, 8%);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(215, 30%, 8%);
  --popover: hsl(0, 0%, 100%);
  --popover-foreground: hsl(215, 30%, 8%);
  --primary: hsl(178, 84%, 40%);
  --primary-foreground: hsl(0, 0%, 100%);
  --secondary: hsl(210, 40%, 98%);
  --secondary-foreground: hsl(215, 30%, 8%);
  --muted: hsl(210, 40%, 96%);
  --muted-foreground: hsl(215, 25%, 25%);
  --accent: hsl(210, 40%, 96%);
  --accent-foreground: hsl(215, 30%, 8%);
  --destructive: hsl(11, 80%, 50%);
  --border: hsl(214.3, 31.8%, 91.4%);
  --input: hsl(214.3, 31.8%, 91.4%);
  --ring: hsl(178, 84%, 40%);
  
  /* Enhanced chart colors - Deep Ocean Tech palette */
  --chart-1: hsl(178, 84%, 40%);
  --chart-2: hsl(188, 94%, 45%);
  --chart-3: hsl(262, 83%, 58%);
  --chart-4: hsl(43, 100%, 48%);
  --chart-5: hsl(11, 80%, 50%);
  
  /* Sidebar with Deep Ocean Tech styling */
  --sidebar: hsl(210, 40%, 99%);
  --sidebar-foreground: hsl(215, 30%, 8%);
  --sidebar-primary: hsl(178, 84%, 40%);
  --sidebar-primary-foreground: hsl(0, 0%, 100%);
  --sidebar-accent: hsl(210, 40%, 96%);
  --sidebar-accent-foreground: hsl(215, 30%, 8%);
  --sidebar-border: hsl(214.3, 31.8%, 91.4%);
  --sidebar-ring: hsl(178, 84%, 40%);
  
  /* Premium semantic colors - Deep Ocean Tech */
  --success: hsl(178, 84%, 40%);
  --success-foreground: hsl(0, 0%, 100%);
  --warning: hsl(43, 100%, 48%);
  --warning-foreground: hsl(0, 0%, 100%);
  --info: hsl(188, 94%, 45%);
  --info-foreground: hsl(0, 0%, 100%);
}

.dark {
  /* Dark Theme - Deep Ocean Tech Design */
  --background: hsl(220, 27%, 6%);
  --foreground: hsl(210, 40%, 98%);
  --card: hsl(220, 27%, 8%);
  --card-foreground: hsl(210, 40%, 98%);
  --popover: hsl(220, 27%, 8%);
  --popover-foreground: hsl(210, 40%, 98%);
  --primary: hsl(178, 84%, 40%);
  --primary-foreground: hsl(220, 27%, 6%);
  --secondary: hsl(217.2, 32.6%, 17.5%);
  --secondary-foreground: hsl(210, 40%, 98%);
  --muted: hsl(217.2, 32.6%, 17.5%);
  --muted-foreground: hsl(215, 20.2%, 65.1%);
  --accent: hsl(217.2, 32.6%, 17.5%);
  --accent-foreground: hsl(210, 40%, 98%);
  --destructive: hsl(11, 80%, 50%);
  --border: hsl(217.2, 32.6%, 17.5%);
  --input: hsl(217.2, 32.6%, 17.5%);
  --ring: hsl(178, 84%, 40%);
  
  /* Enhanced chart colors for dark theme - Deep Ocean Tech */
  --chart-1: hsl(178, 84%, 40%);
  --chart-2: hsl(188, 94%, 45%);
  --chart-3: hsl(262, 83%, 58%);
  --chart-4: hsl(43, 100%, 48%);
  --chart-5: hsl(11, 80%, 50%);
  
  /* Sophisticated dark sidebar - Deep Ocean Tech */
  --sidebar: hsl(220, 27%, 6%);
  --sidebar-foreground: hsl(210, 40%, 98%);
  --sidebar-primary: hsl(178, 84%, 40%);
  --sidebar-primary-foreground: hsl(220, 27%, 6%);
  --sidebar-accent: hsl(217.2, 32.6%, 17.5%);
  --sidebar-accent-foreground: hsl(210, 40%, 98%);
  --sidebar-border: hsl(217.2, 32.6%, 17.5%);
  --sidebar-ring: hsl(178, 84%, 40%);
  
  /* Premium semantic colors for dark theme - Deep Ocean Tech */
  --success: hsl(178, 84%, 40%);
  --success-foreground: hsl(220, 27%, 6%);
  --warning: hsl(43, 100%, 48%);
  --warning-foreground: hsl(220, 27%, 6%);
  --info: hsl(188, 94%, 45%);
  --info-foreground: hsl(220, 27%, 6%);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  
  html {
    @apply scroll-smooth;
    height: 100%;
  }
  
  body {
    @apply bg-background text-foreground font-sans antialiased;
    font-feature-settings: 'cv01', 'cv02', 'cv03', 'cv04';
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    height: 100%;
    min-height: 100vh;
  }
  
  #__next {
    height: 100%;
  }
  
  /* Premium typography hierarchy */
  h1, h2, h3, h4, h5, h6 {
    @apply font-semibold tracking-tight;
    line-height: 1.25;
  }
  
  h1 { @apply text-4xl; }
  h2 { @apply text-3xl; }
  h3 { @apply text-2xl; }
  h4 { @apply text-xl; }
  h5 { @apply text-lg; }
  h6 { @apply text-base; }
  
  /* Enhanced focus styles */
  :focus-visible {
    @apply outline-2 outline-offset-2 outline-ring;
  }
  
  /* Smooth transitions for interactive elements */
  button, a, input, select, textarea {
    @apply transition-all duration-200;
  }
  
  /* Enhanced scrollbar styles */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }
  
  ::-webkit-scrollbar-thumb {
    @apply bg-border rounded-full;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-muted-foreground/50;
  }
  
  .dark ::-webkit-scrollbar-thumb {
    @apply bg-border;
  }
  
  .dark ::-webkit-scrollbar-thumb:hover {
    @apply bg-muted-foreground/30;
  }
}

/* Fluid Design System */
@layer base {
  :root {
    /* Fluid spacing scale using clamp() */
    --space-fluid-xs: clamp(0.25rem, 0.5vw, 0.5rem);
    --space-fluid-sm: clamp(0.5rem, 1vw, 0.75rem);
    --space-fluid-md: clamp(0.75rem, 1.5vw, 1rem);
    --space-fluid-lg: clamp(1rem, 2vw, 1.5rem);
    --space-fluid-xl: clamp(1.5rem, 3vw, 2.5rem);
    --space-fluid-2xl: clamp(2rem, 4vw, 4rem);
    --space-fluid-3xl: clamp(3rem, 6vw, 6rem);
    
    /* Fluid typography scale */
    --text-fluid-xs: clamp(0.75rem, 0.8vw + 0.5rem, 0.875rem);
    --text-fluid-sm: clamp(0.875rem, 0.9vw + 0.6rem, 1rem);
    --text-fluid-base: clamp(1rem, 1vw + 0.75rem, 1.125rem);
    --text-fluid-lg: clamp(1.125rem, 1.2vw + 0.9rem, 1.25rem);
    --text-fluid-xl: clamp(1.25rem, 1.5vw + 1rem, 1.5rem);
    --text-fluid-2xl: clamp(1.5rem, 2vw + 1.2rem, 2rem);
    --text-fluid-3xl: clamp(1.875rem, 2.5vw + 1.5rem, 2.5rem);
    --text-fluid-4xl: clamp(2.25rem, 3vw + 1.8rem, 3rem);
    --text-fluid-5xl: clamp(3rem, 4vw + 2.4rem, 4rem);
    
    /* Responsive container padding */
    --container-padding: clamp(1rem, 2vw, 3rem);
    
    /* Dynamic viewport units for better mobile support */
    --vh: 1vh;
    --vw: 1vw;
  }
  
  /* Custom breakpoints for larger displays */
  @media (min-width: 1920px) {
    :root {
      --container-padding: clamp(2rem, 3vw, 4rem);
    }
  }
  
  @media (min-width: 2560px) {
    :root {
      --container-padding: clamp(3rem, 4vw, 6rem);
    }
  }
  
  /* Ultra-wide display support */
  @media (min-aspect-ratio: 21/9) {
    :root {
      --container-padding: clamp(2rem, 5vw, 8rem);
    }
  }
}

@layer components {
  /* Premium card styles with glassmorphism */
  .card-premium {
    @apply bg-card/60 backdrop-blur-md border border-border/50 rounded-lg shadow-lg;
    box-shadow: var(--shadow-medium);
  }
  
  .card-premium:hover {
    @apply border-border;
    box-shadow: var(--shadow-strong);
    transform: translateY(-2px);
  }
  
  /* Floating action button */
  .fab {
    @apply fixed bottom-6 right-6 w-14 h-14 bg-primary text-primary-foreground rounded-full shadow-lg;
    box-shadow: var(--shadow-premium);
  }
  
  .fab:hover {
    @apply scale-110;
    box-shadow: var(--shadow-premium);
  }
  
  /* Premium glass container */
  .glass-container {
    @apply bg-background/80 backdrop-blur-lg border border-border/30 rounded-xl;
    box-shadow: var(--shadow-soft);
  }
  
  /* Data visualization containers */
  .chart-container {
    @apply bg-card border border-border rounded-lg p-4;
    box-shadow: var(--shadow-soft);
  }
  
  /* Status indicators */
  .status-indicator {
    @apply inline-flex items-center gap-2 px-2 py-1 rounded-full text-xs font-medium;
  }
  
  .status-online {
    @apply bg-green-50 text-green-700 border border-green-200;
  }
  
  .status-offline {
    @apply bg-muted text-muted-foreground border border-border;
  }
  
  .status-error {
    @apply bg-red-50 text-red-700 border border-red-200;
  }
  
  .status-warning {
    @apply bg-amber-50 text-amber-700 border border-amber-200;
  }
  
  .dark .status-online {
    @apply bg-green-950 text-green-300 border border-green-800;
  }
  
  .dark .status-error {
    @apply bg-red-950 text-red-300 border border-red-800;
  }
  
  .dark .status-warning {
    @apply bg-amber-950 text-amber-300 border border-amber-800;
  }
  
  /* Fluid container with responsive padding */
  .fluid-container {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    padding-top: var(--space-fluid-lg);
    padding-bottom: var(--space-fluid-lg);
  }
  
  /* Responsive graph container */
  .graph-container {
    min-height: clamp(400px, 50vh, 600px);
    height: calc(100vh - 12rem);
    max-height: calc(100vh - 8rem);
  }
  
  @media (min-width: 768px) {
    .graph-container {
      height: calc(100vh - 10rem);
      max-height: calc(100vh - 6rem);
    }
  }
  
  @media (min-width: 1920px) {
    .graph-container {
      height: calc(100vh - 8rem);
      max-height: calc(100vh - 5rem);
    }
  }
  
  /* Ultra-wide specific styles */
  @media (min-aspect-ratio: 21/9) {
    .graph-container {
      height: calc(100vh - 6rem);
      max-height: none;
    }
  }
  
  /* Grid layout constraints for large screens */
  @media (min-width: 1920px) {
    .grid {
      gap: var(--space-fluid-xl);
    }
  }
  
  /* Maximum grid column width for readability */
  .grid > * {
    max-width: 100%;
  }
  
  @media (min-width: 2560px) {
    .grid-cols-4 > * {
      max-width: 400px;
    }
    
    .grid-cols-3 > * {
      max-width: 600px;
    }
  }
  
  /* High DPI display optimizations */
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .graph-container {
      image-rendering: crisp-edges;
      -webkit-font-smoothing: antialiased;
    }
  }
  
  /* Ensure full width layouts don't have unwanted margins */
  .w-full {
    width: 100% !important;
  }
  
  /* Better handling of flex containers on large screens */
  @media (min-width: 1920px) {
    .flex {
      gap: var(--space-fluid-md);
    }
    
    .space-y-6 > * + * {
      margin-top: var(--space-fluid-xl);
    }
  }
}

@layer utilities {
  /* Animation utilities */
  .animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
  }
  
  .animate-slide-up {
    animation: slideUp 0.3s ease-out forwards;
  }
  
  .animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  
  /* Layout utilities */
  .sidebar-width {
    width: 280px;
  }
  
  .main-content {
    margin-left: 280px;
  }
  
  @media (max-width: 768px) {
    .main-content {
      margin-left: 0;
    }
  }
  
  /* Responsive max-width container */
  .responsive-max-width {
    width: 100%;
    max-width: 1536px; /* Default max-width */
  }
  
  @media (min-width: 1920px) {
    .responsive-max-width {
      max-width: 1728px; /* 90% of 1920px */
    }
  }
  
  @media (min-width: 2560px) {
    .responsive-max-width {
      max-width: 2304px; /* 90% of 2560px */
    }
  }
  
  @media (min-width: 3840px) {
    .responsive-max-width {
      max-width: 3456px; /* 90% of 3840px (4K) */
    }
  }
  
  /* Ultra-wide specific max-width */
  @media (min-aspect-ratio: 21/9) {
    .responsive-max-width {
      max-width: 85%; /* Percentage-based for ultra-wide */
    }
  }
  
  @media (min-aspect-ratio: 32/9) {
    .responsive-max-width {
      max-width: 75%; /* Even more constrained for super ultra-wide */
    }
  }
  
  /* Fluid text utilities */
  .text-fluid-xs { font-size: var(--text-fluid-xs); }
  .text-fluid-sm { font-size: var(--text-fluid-sm); }
  .text-fluid-base { font-size: var(--text-fluid-base); }
  .text-fluid-lg { font-size: var(--text-fluid-lg); }
  .text-fluid-xl { font-size: var(--text-fluid-xl); }
  .text-fluid-2xl { font-size: var(--text-fluid-2xl); }
  .text-fluid-3xl { font-size: var(--text-fluid-3xl); }
  .text-fluid-4xl { font-size: var(--text-fluid-4xl); }
  .text-fluid-5xl { font-size: var(--text-fluid-5xl); }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Premium loading animations */
@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.loading-shimmer {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  background-size: 200px 100%;
  animation: shimmer 1.5s infinite;
}